<template>
  <div>
    <h1>测试页面&emsp;</h1>

    <!-- 查询框 -->
    <el-form
      :inline="true"
      :model="queryForm"
      ref="queryForm"
      class="demo-queryForm broSerach"
      label-position="right"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryForm.name"
          autocomplete="off"
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-col :span="8">
          <el-input-number
            v-model="queryForm.age"
            placeholder="请输入年龄(岁)"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            :min="null"
            :max="120"
          >
          </el-input-number>
        </el-col>
      </el-form-item>

      <el-form-item label="性别" prop="sex" required>
        <el-select v-model="queryForm.sex" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="家乡" prop="hometown">
        <el-input
          v-model="queryForm.hometown"
          autocomplete="off"
          placeholder="请输入家乡"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-input
          v-model="queryForm.hobby"
          autocomplete="off"
          placeholder="请输入爱好"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="生日" prop="birth">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择时间和日期"
          v-model="queryForm.birth"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch()">立即查询</el-button>
        <el-button @click="resetForm('queryForm')">重置</el-button>
        <el-button type="primary" @click="addOrUpdate()">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- table页 -->
    <el-table :data="dataList">
      <el-table-column
        prop="id"
        label="ID"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        align="center"
        show-overflow-tooltip
        :formatter="sexFormatter"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="hometown"
        label="家乡"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="hobby"
        label="爱好"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="birth"
        label="时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="default"
            icon="el-icon-edit"
            @click="addOrUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="default"
            icon="el-icon-delete"
            @click="delBroById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页开启 -->
    <div class="page-container">
      <el-pagination
        :current-page="current"
        :page-sizes="[10, 4, 50, 100]"
        :total="totalCount"
        background
        layout="total, prev, pager, next,sizes,jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      >
        >
      </el-pagination>
    </div>

    <broForm v-if="broFormVisible" ref="editBro"></broForm>
  </div>
</template>
<script>
//传入弹窗文件
import axios from "axios";
import qs from "qs";
import broForm from "../components/editBro";
import { getBro, delBro } from "../api/broApi";
import { pageMixins } from "../utils/page";
import moment from "moment";
import broForm1 from "../views/test/test.vue";

export default {
  name: "bro",
  mixins: [pageMixins],
  components: { broForm },
  data() {
    return {
      options: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 0,
          label: "女",
        },
      ],
      dataListLoading: false,
      loadingText: "",
      broFormVisible: false,
      // 表单查询
      queryForm: {
        id: undefined,
        sex: undefined,
        name: "",
        age: 0,
        hometown: "",
        hobby: "",
        birth: undefined,
      },
      // 表格数据
      dataList: [],
    };
  },
  mounted() {
    this.getDataList();
    //alert("size是"+this.size);
  },
  methods: {
    //获取列表数据
    getDataList() {
      let query = {
        sex: this.queryForm.sex,
        name: this.queryForm.name,
        hometown: this.queryForm.hometown,
        age: this.queryForm.age,
        hobby: this.queryForm.hobby,
        birth: this.queryForm.birth,
        pageNum: this.current,
        pageSize: this.size,
      };
      getBro(query)
        .then((res) => {
          this.dataList = res.list;
          this.totalCount = res.total;
          //alert(size);
          //console.log(res);
          //alert("调用查询");
        })
        .catch((res) => {
          alert(res);
        });
    },

    //查询方法老的最开始写的
    getDataListOld() {
      //let _this = this;
      axios
        .post(
          "http://localhost:8081/student/getStudentList",
          qs.stringify({
            sex: this.queryForm.sex,
            name: this.queryForm.name,
            hometown: this.queryForm.hometown,
            age: this.queryForm.age,
            hobby: this.queryForm.hobby,
            pageNum: this.currentPage,
            pageSize: this.size,
          })
        )
        .then((response) => {
          this.dataList = response.data.data;
          this.totalCount = response.data.data.length;
          console.log(this.totalCount);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //查询事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          getDataList();
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    sexFormatter(row, column) {
      if (row.sex == 1) {
        return "男";
      } else if (row.sex == 0) {
        return "女";
      }
    },
    // 查询事件
    handleSearch() {
      // 一定要加上这个，否则会出现查询不到结果的情况
      this.current = 1;
      this.getDataList();
    },

    // 刷新
    refreshDataList() {
      this.getDataList();
    },
    // 新增或修改
    addOrUpdate(row) {
      this.broFormVisible = true;
      this.$nextTick(() => {
        this.$refs["editBro"].init(row);
      });
    },

    delBroById(id) {
      this.$confirm(`确定进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //let BroId = qs.stringify({id: id,sdfaasd:"3452345"})
          let BroId = { id: id };
          console.log(BroId);
          delBro(BroId)
            .then((data) => {
              this.$message.success("删除成功");
              this.getDataList();
            })
            .catch((e) => {
              this.$message.success(e.msg);
            });
        })
        .catch(() => {});
    },

    delBroOld(id) {
      axios
        .post(
          "http://localhost:8081/student/delStudentById.do",
          qs.stringify({
            id: id,
          })
        )
        .then((response) => {
          alert(id);
          console.log(response);
        })
        .catch(function (error) {
          alert(id);
          console.log(error);
        });
    },

    // 删除事件和方法
    handleDelete(id) {
      this.$confirm(`确定进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBro(id)
            .then((data) => {
              this.$message.success("删除成功");
              this.getDataList();
            })
            .catch((e) => {
              this.$message.success(e.msg);
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="css">
.broSerach .el-input-number {
  width: 300px;
}
.broSerach .el-input__inner {
  width: 300px;
}
.broSerach .el-form-item__content {
  margin-left: 40px;
}
</style>